<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    v-loading="loading"
  >
    <el-form-item label="版本名称:" prop="versionName">
      <el-input v-model="ruleForm.versionName" placeholder="输入版本名称" />
    </el-form-item>
    <el-form-item label="版本类型:" prop="versionType">
      <el-select v-model="ruleForm.versionType" class="m-2" placeholder="版本类型">
        <el-option key="dev" label="开发" value="dev" />
        <el-option key="test" label="测试" value="test" />
        <el-option key="pro" label="生产" value="pro" />
      </el-select>
    </el-form-item>
    <el-form-item label="APK文件:" prop="versionApk">
      <el-upload
        :file-list="fileList"
        class="upload-demo"
        drag
        accept=".apk"
        :auto-upload="false"
        :limit="1"
        :on-change="handleChange"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">拖拽文件 或者 <em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">上传项目打包后的apk文件</div>
        </template>
      </el-upload>
    </el-form-item>
    <el-form-item label="版本说明:" prop="versionDesc">
      <el-input
        v-model="ruleForm.versionDesc"
        maxlength="100"
        show-word-limit
        :rows="2"
        type="textarea"
        placeholder="版本说明"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
      <el-button @click="closeVersion">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, inject } from 'vue'
import type { FormInstance, FormRules, UploadUserFile, UploadFile, UploadFiles } from 'element-plus'
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import { VersionAddApi } from '@/api'
import type { VersionAddReq } from '@/api/types'
import { useCounterStore } from '@/stores/manage.ts'

const ruleFormRef = ref<FormInstance>()
const loading = ref(false)
const manager = useCounterStore()

//  表单模型
const ruleForm = reactive<VersionAddReq>({
  appId: manager.getAppId(),
  versionName: '',
  versionType: '',
  versionApk: '',
  versionDesc: ''
})

// apk文件
const fileList = ref<UploadUserFile[]>([])
const handleChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  fileList.value = uploadFiles
}
// 文件非空校验
const validateApk = (rule: any, value: any, callback: any) => {
  if (fileList.value.length === 0) {
    callback(new Error('选择apk文件'))
  } else {
    callback()
  }
}

// 校验规则
const rules = reactive<FormRules<VersionAddReq>>({
  versionName: [{ required: true, message: '输入版本名称', trigger: 'blur' }],
  versionType: [{ required: true, message: '选择版本类型', trigger: 'blur' }],
  versionApk: [{ required: true, validator: validateApk, trigger: 'blur' }],
  versionDesc: [{ required: true, message: '输入版本说明', trigger: 'blur' }]
})

// 提交
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return

  formEl.validate((valid) => {
    if (valid) {
      loading.value = true
      ruleForm.versionApk = fileList.value[0].raw
      VersionAddApi(ruleForm)
        .then((response) => {
          if (response.data.code == 200) {
            closeVersion()
            refresh()
            ElMessage.success(response.data.msg)
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .finally(() => {
          loading.value = false
        })
    } else {
      console.log('error submit!')
      return false
    }
  })
}

// 父级页面的关闭函数
const closeVersion: Function = inject('closeVersion') as Function
const refresh: Function = inject('refreshVersions') as Function
</script>
